import { Button, Checkbox, Col, DatePicker, Drawer, Form, Icon, Input, InputNumber, Radio, Select, TimePicker, Tooltip,Row, message } from 'antd';
import React from 'react'
import componentTypeList from './componentTypeList';
import styles from '../index.less'
import Sortable from 'sortablejs';
import {arrayMoveImmutable} from 'array-move';
import { getUuid } from '@/utils/utils';
import dateTypeUnitList from './dateTypeUnitList';
import { BasicDictSysList, dictionaryList } from '@/services/basiccapacity';
import { formDictionaryColumn, formDictionaryList, formFieldEdit, formFieldInfo, formFieldSave } from '@/services/formInteraction';
import moment from 'moment';

class EditField extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      id:'',
      dictionaryList:[],
      colList:[],
      optionContentList:[''],
      domKey:getUuid(),
      defaultOptionList:[],
      dateSetting:{
        'startTime':{
          yearOpen:false
        },
        'endTime':{
          yearOpen:false
        },
        'defaultValue':{
          yearOpen:false
        }
      },
      columnValue:[''],
      modelList:[],
      sysModelList:[]
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initModal = id => {
    this.setState({
      visible:true
    },() => {
      //1.获取实体列表
      this.getModelList()
      //2.获取系统实体
      this.getSysModelList()
      if(id){
        this.getDetail(id)
      }
    })
  }

  getModelList = async () => {
    const res = await dictionaryList({current:1,size:999999999999999})
    this.setState({
      modelList:res.records
    })
  }

  getSysModelList = async () => {
    const res = await BasicDictSysList({query:''})
    this.setState({
      sysModelList:res
    })
  }

  getDetail = async (id) => {
    const res = await formFieldInfo({id})
    const { form:{setFieldsValue} } = this.props
    //固定字段赋值
    setFieldsValue({
      name:res.name,
      encoding:res.encoding,
      componentType:res.componentType,
      fieldPromptType:res.fieldPromptType == 1,
      inputPrompt:res.inputPrompt,
      promptType:res.promptType,
      requiredType:res.requiredType == 1,
      verifyRule:res.verifyRule,
      errorMessage:res.errorMessage,
      bindModelId:res.bindModelId,
    })
    //字段提示
    if(res.fieldPromptType){
      setFieldsValue({fieldPrompt:res.fieldPrompt})
    }
    //文本框/文本域
    if(res.componentType == 0 || res.componentType == 1){
      //默认值/最大长度
      setFieldsValue({defaultValue:res.defaultValue,maxLength:res.maxLength})
    }
    //数字框
    if(res.componentType == 2){
      setFieldsValue({numberType:res.numberType,unit:res.unit,unitType:res.unitType})
    }
    //选项
    if(res.componentType == 3){
      setFieldsValue({optionsType:res.optionsType,componentStyle:res.componentStyle,optionRange:res.optionRange,disabled:res.disabled})
      //1.数据字典
      if(res.optionRange == 0 && res.componentStyle != 3){
        this.getDictionaryList(res.dictionaryId,res.optionContent.toString())
        setFieldsValue({dictionaryId:res.dictionaryId,optionContent:res.optionContent.toString()})
      }
      //2.自定义
      if(res.optionRange == 1 && res.componentStyle != 3){
        this.setState({
          optionContentList:res.optionContent
        })
      }
      //3多选
      let defaultValue = res.defaultValue
      if(res.optionsType == 1){
        defaultValue = res.defaultValue ? res.defaultValue.split(",") : []
      }
      setFieldsValue({defaultValue})
    }
    //时间
    if(res.componentType == 4){
      setFieldsValue({dateType:res.dateType,displayFormat:res.displayFormat,optionDateRange:res.optionDateRange})
      //1.绝对时间
      if(res.optionDateRange == 0){
        setFieldsValue({
          startStatus:res.startStatus == 1,
          endStatus:res.endStatus == 1,
          startTime:res.startTime ? moment(res.startTime) : '',
          endTime:res.endTime ? moment(res.endTime) : '',
          defaultValue:res.defaultValue ? moment(res.defaultValue) : ''
        })
      }
      //2.相对时间
      if(res.optionDateRange == 1){
        setFieldsValue({
          frontNumber:res.frontNumber,
          backNumber:res.backNumber,
          frontType:res.frontType,
          backType:res.backType
        })
      }
    }
    //多级联动
    if(res.componentType == 5){
      this.getDictionaryList(res.dictionaryId)
      setFieldsValue({dictionaryId:res.dictionaryId})
      this.setState({
        columnValue:res.columnValue ? res.columnValue : []
      })
      
    }
    //文件/图片
    if(res.componentType == 6 || res.componentType == 7){
      setFieldsValue({maxNumber:res.maxNumber,singleSize:res.singleSize})
    }

    console.log(res);
    this.setState({
      id:res.id
    })
  }

  doClose = () => {
    this.props.form.resetFields()
    this.setState({
      visible:false,
      id:'',
      dictionaryList:[],
      colList:[],
      optionContentList:[''],
      domKey:getUuid(),
      defaultOptionList:[],
      dateSetting:{
        'startTime':{
          yearOpen:false
        },
        'endTime':{
          yearOpen:false
        },
        'defaultValue':{
          yearOpen:false
        }
      },
      columnValue:[''],
      modelList:[]
    })
  }

  checkData = () => {
    const { form:{validateFields} } = this.props
    const { optionContentList,columnValue } = this.state;
    validateFields((error,values) => {
      if(!error){
        console.log(values);
        //处理实体
        values.bindModelId = values.bindModelId ? values.bindModelId : ''
        //处理复选框 true false问题
        values.fieldPromptType = values.fieldPromptType ? 1 : 0
        values.requiredType = values.requiredType ? 1 : 0
        values.disabled = values.disabled ? 1 : 0
        values.startStatus = values.startStatus ? 1 : 0
        values.endStatus = values.endStatus ? 1 : 0

        //处理选项内容
        if(values.componentType == 3){
          //1.选项-数据字典
          if(values.optionRange == 0){
            values.optionContent = this.isEmpty(values.optionContent) ? [values.optionContent] : []
          }
          //2.选项-自定义
          if(values.optionRange == 1){
            values.optionContent = optionContentList.filter(item => item.length > 0)
          }
          //3.选项-默认值
          values.defaultValue = this.isEmpty(values.defaultValue) ? values.defaultValue.toString() : ''
        }
        

        //处理时间内容
        if(values.componentType == 4){
          //1. 绝对时间-结束时间需大于起始时间
          if(values.optionDateRange == 0 && values.startStatus && values.endStatus){
            const startTime = this.formatDateTime(values.startTime,values.dateType)
            const endTime = this.formatDateTime(values.endTime,values.dateType)
            if(moment(endTime).isBefore(moment(startTime))){
              message.error("结束时间需大于起始时间")
              return false
            }
          }
          //2.判断默认时间的合法性
          if(values.defaultValue){
            const defaultValue = this.formatDateTime(values.defaultValue,values.dateType)
            
            //2.1 绝对时间-起始时间选中-默认时间需大于起始时间
            if(values.optionDateRange == 0 && values.startStatus){
              const startTime = this.formatDateTime(values.startTime,values.dateType)
              if(moment(defaultValue).isBefore(moment(startTime),'second')){
                message.error("默认时间需大于起始时间")
                return false
              }
            }
            //2.2 绝对时间-结束时间选中-默认时间需小于结束时间
            if(values.optionDateRange == 0 && values.endStatus){
              const endTime = this.formatDateTime(values.endTime,values.dateType)
              if(moment(defaultValue).isAfter(moment(endTime),'second')){
                message.error("默认时间需小于结束时间")
                return false
              }
            }
          }
          //3.格式化时间
          values.startTime = values.startTime ? moment(values.startTime).format("YYYY-MM-DD HH:mm:ss") : ''
          values.endTime = values.endTime ? moment(values.endTime).format("YYYY-MM-DD HH:mm:ss") : ''
          values.defaultValue = values.defaultValue ? this.formatDateTime(values.defaultValue,values.dateType) : ''
        }

        //处理多级联动
        if(values.componentType == 5){
          values.columnValue = columnValue.filter(item => item.length > 0)
        }
        

        this.doSave(values)
      }
    })
  }

  doSave = async values => {
    const { formId } = this.props
    const { id } = this.state;
    let obj = {...values,formId,id};
    let res = {}
    if(id){
      res = await formFieldEdit(obj)
      
    }else{
      res = await formFieldSave(obj);
    }

    if(res.code && res.code == -1){
      //报错
      return false
    }
    message.info(res.message);
    this.doClose()
    this.props.refreshList()
  }

  changeOptionRange = value => {
    //自定义需要 创建拖拽容器
    if(value == 1){
      setTimeout(() => {
        this.drawDragBox()
      },100)
    }else{
      //获取数据字典
      this.getDictionaryList()
    }
  }

  getDictionaryList = async (dictionaryId,optionContent) => {
    const { formId } = this.props
    const res = await formDictionaryList({formId,current:1,size:99999999999})
    this.setState({
      dictionaryList:res.records
    },() => {
      if(dictionaryId){
        this.changeDictionaryId(dictionaryId,'init',optionContent)
      }
    })
  }

  drawDragBox = () => {
    const that = this;
    const el = document.getElementById('optionContent')
    new Sortable(el, {
      group: {
        name:"optionContent",
        pull:false,
        put:true
      },
      handle:".anticon-unordered-list",
      animation: 150,
      // 元素从一个列表拖拽到另一个列表
      onAdd: function (/**Event*/evt) {
        console.log('第一层onAdd==',evt);
      },
      // 结束拖拽
      onEnd: function (/**Event*/evt) {
        console.log('第一层的结束拖拽=====',evt);
        const list = JSON.parse(JSON.stringify(that.state.optionContentList))
        const newArray = arrayMoveImmutable(list, evt.oldIndex, evt.newIndex);
        that.setState({
          optionContentList:newArray,
          domKey:getUuid()
        },() => {
          console.log(that.state.optionContentList);
          that.drawDragBox()
        })
      },
    });
  }

  changeOptionContent = (e,index) => {
    const list = JSON.parse(JSON.stringify(this.state.optionContentList))
    list[index] = e.target.value;
    this.setState({
      optionContentList:list
    })
  }

  addOptionContent = () => {
    const list = JSON.parse(JSON.stringify(this.state.optionContentList))
    list.push("")
    this.setState({
      optionContentList:list,
    })
  }

  removeOptionContent = index => {
    const list = JSON.parse(JSON.stringify(this.state.optionContentList))
    const newList = []
    for(const i in list){
      if(i!= index){
        newList.push(list[i])
      }
    }
    this.setState({
      optionContentList:newList
    })
  }

  renderDateBox = (formKey) => {
    const { dateSetting } = this.state;
    const type = this.props.form.getFieldValue("dateType")
    switch(type){
      case 0:
        return (
          <DatePicker 
            format={'YYYY'} 
            mode={'year'} 
            open={dateSetting[formKey].yearOpen} 
            onPanelChange={(value) => this.handlePanelChange(value,formKey)} 
            onOpenChange={(value) => this.handleOpenChange(value,formKey)}
          />
        )
      case 1:
        return (
          <DatePicker.MonthPicker />
        )
      case 2:
        return (
          <DatePicker />
        )
      case 3:
        return (
          <DatePicker showTime={{format:"HH"}} format={'YYYY-MM-DD HH'} />
        )
      case 4:
        return (
          <DatePicker showTime={{format:"HH:mm"}} format={'YYYY-MM-DD HH:mm'} />
        )
      case 5:
        return (
          <DatePicker showTime={{format:"HH:mm:ss"}} format={'YYYY-MM-DD HH:mm:ss'} />
        )
      case 6:
        return(
          <TimePicker format='HH:mm' />
        )
      case 7:
        return(
          <TimePicker format='HH:mm:ss' />
        )
      default :
        return <DatePicker />
    }
  }

  handlePanelChange = (value,formKey) => {
    let obj = {}
    obj[formKey] = value
    this.props.form.setFieldsValue(obj)
    this.handleOpenChange(false,formKey)
  }

  handleOpenChange = (value,formKey) => {
    const { dateSetting } = this.state;
    dateSetting[formKey].yearOpen = value
    this.setState({
      dateSetting
    })
  }

  renderDateUnit = formKey => {
    const type = this.props.form.getFieldValue("dateType")
    let list = []
    try{
      list = JSON.parse(JSON.stringify(dateTypeUnitList[type]))
    }catch(e){

    }
    return (
      <Select style={{width:200}}>
        {
          list.map(item => {
            return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
          })
        }
      </Select>
    )
  }

  changeColumnValue = (value,index) => {
    const list = JSON.parse(JSON.stringify(this.state.columnValue))
    list[index] = value;
    this.setState({
      columnValue:list
    })
  }

  addColumnValue = () => {
    const list = JSON.parse(JSON.stringify(this.state.columnValue))
    list.push("")
    this.setState({
      columnValue:list,
    })
  }

  removeColumnValue = index => {
    const list = JSON.parse(JSON.stringify(this.state.columnValue))
    const newList = []
    for(const i in list){
      if(i!= index){
        newList.push(list[i])
      }
    }
    this.setState({
      columnValue:newList
    })
  }

  changeDictionaryId = (value,flag,optionContent) => {
    const { dictionaryList } = this.state;
    //填写表单的时候需要清空 初始赋值时不清空
    if(flag == 'form'){
      this.props.form.setFieldsValue({optionContent:""})
    }
    
    let arr = []
    for(const item of dictionaryList){
      if(item.id == value){
        arr = item.columnList
      }
    }
    this.setState({
      colList:arr
    })
    if(optionContent){
      this.getDictionaryDefaultList(optionContent)
    }

  }

  changeOptionsType = e => {
    const componentStyle = this.props.form.getFieldValue("componentStyle")
    //若切换成了多选，且当前选中的是单选框或者开关，则需要切换默认值为复选框
    if(e.target.value == 1 && (componentStyle == 0 || componentStyle == 3)){
      this.props.form.setFieldsValue({componentStyle:1})
    }
    //若切换成了单选，且当前选中的是复选框，则需要切换默认值为单选框
    if(e.target.value == 0 && componentStyle == 1){
      this.props.form.setFieldsValue({componentStyle:0})
    }
  }

  changeComponentType = value => {
    //多级联动 获取数据字典
    if(value == 5){
      this.getDictionaryList()
    }
  }

  formatDateTime = (date,dateType) => {
    const currentDay = moment().format("YYYY-MM-DD")
    let dateFormat = 'YYYY-MM-DD HH:mm:ss'
    switch(dateType){
      case 0 :
        dateFormat = 'YYYY';
        break;
      case 1:
        dateFormat = 'YYYY-MM'
        break;
      case 2:
        dateFormat = 'YYYY-MM-DD';
        break;
      case 3:
        dateFormat = 'YYYY-MM-DD HH';
        break;
      case 4:
        dateFormat = 'YYYY-MM-DD HH:mm';
        break;
      case 5:
        dateFormat = 'YYYY-MM-DD HH:mm:ss';
        break;
      case 6:
        dateFormat = currentDay+' HH:mm';
        break;
      case 7:
        dateFormat = currentDay+' HH:mm:ss';
        break;
      default:
        dateFormat = 'YYYY-MM-DD HH:mm:ss'
        break;
    }
    return moment(date).format(dateFormat)
  }

  //判断值可能为0的非空
  isEmpty = data => {
    return data != undefined && data.length > 0
  }

  //修改选项-数据字典-选项内容-获取默认值
  changeOptionContentByDictionary = value => {
    console.log(value);
    this.getDictionaryDefaultList(value)
  }

  getDictionaryDefaultList = async (value) => {
    const info = this.props.form.getFieldsValue()
    if(info.dictionaryId){
      const res = await formDictionaryColumn({id:info.dictionaryId,name:value})
      this.setState({
        defaultOptionList:res
      })
    }
    
  }

  render(){
    const { visible,id,dictionaryList,colList,optionContentList,domKey,defaultOptionList,columnValue,modelList,sysModelList } = this.state;
    const { form:{getFieldDecorator,getFieldValue} } = this.props
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    const inlineFormItem = {display:"inline-block",marginBottom:0}
    return(
      <Drawer
        visible={visible}
        onClose={this.doClose}
        title={id ? '编辑字段' : '创建字段'}
        width={800}
      >
        <Form {...formItemLayout} style={{marginBottom:60}}>
          <Form.Item label="字段名称">
            <Form.Item style={inlineFormItem}>
              {
                getFieldDecorator('name',{rules:[{required:true,message:"请输入"}]})(
                  <Input />
                )
              }
            </Form.Item>
            <Form.Item style={{...inlineFormItem,marginLeft:10}}>
              {
                getFieldDecorator("fieldPromptType",{valuePropName: 'checked'})(
                  <Checkbox>字段提示（显示在字段正下方）</Checkbox>
                )
              }
            </Form.Item>
          </Form.Item>
          {
            getFieldValue('fieldPromptType') ? (
              <Form.Item label="字段提示">
                {
                  getFieldDecorator('fieldPrompt')(
                    <Input />
                  )
                }
              </Form.Item>
            ):''
          }
          <Form.Item label="字段编码">
            {
              getFieldDecorator('encoding',{rules:[{required:true,message:"请输入"}]})(
                <Input />
              )
            }
          </Form.Item>
          <Form.Item label="组件类型">
            {
              getFieldDecorator('componentType',{rules:[{required:true,message:"请选择"}],initialValue:0})(
                <Select onChange={this.changeComponentType}>
                  {
                    componentTypeList.map(item => {
                      return <Select.Option value={item.typeKey} key={item.typeKey}>{item.typeName}</Select.Option>
                    })
                  }
                </Select>
              )
            }
          </Form.Item>

          {/** 文本框/文本域 */}
          {
            getFieldValue("componentType") == 0 || getFieldValue("componentType") == 1 ? (
              <div>
                <Form.Item label="默认值">
                  {
                    getFieldDecorator('defaultValue')(
                      <Input />
                    )
                  }
                </Form.Item>
                <Form.Item label="最大长度">
                  {
                    getFieldDecorator('maxLength')(
                      <InputNumber min={0} precision={0} />
                    )
                  }
                </Form.Item>
              </div>
            ) : ''
          }

          {/** 数字框 */}
          {
            getFieldValue("componentType") == 2 ? (
              <div>
                <Form.Item label="数字类型">
                  {
                    getFieldDecorator('numberType')(
                      <Select>
                        <Select.Option value={0}>整数（1，2，3...）</Select.Option>
                        <Select.Option value={1}>小数（0.1，0.2，0.3…）</Select.Option>
                        <Select.Option value={2}>千分位（99,887 19,044 …）</Select.Option>
                        <Select.Option value={3}>千分位（小数点）（99，877.55）</Select.Option>
                        <Select.Option value={4}>百分比（102%）</Select.Option>
                        <Select.Option value={5}>百分比（小数点）（102.05%）</Select.Option>
                      </Select>
                    )
                  }
                </Form.Item>
                <Form.Item label="单位">
                  <Form.Item style={inlineFormItem}>
                    {
                      getFieldDecorator('unit')(
                        <Input />
                      )
                    }
                  </Form.Item>
                  <Form.Item style={{...inlineFormItem,marginLeft:10}}>
                    {
                      getFieldDecorator("unitType",{initialValue:0})(
                        <Radio.Group>
                          <Radio value={0}>后缀</Radio>
                          <Radio value={1}>前缀</Radio>
                        </Radio.Group>
                      )
                    }
                  </Form.Item>
                </Form.Item>
              </div>
            ): ''
          }

          {/**选项 */}
          {
            getFieldValue("componentType") == 3 ? (
              <div>
                <Form.Item label="可选项">
                  {
                    getFieldDecorator("optionsType",{initialValue:0})(
                      <Radio.Group onChange={this.changeOptionsType}>
                        <Radio value={0}>单选</Radio>
                        <Radio value={1}>多选</Radio>
                      </Radio.Group>
                    )
                  }
                </Form.Item>
                <Form.Item label="组件样式">
                {/**单选情况下没有复选框；多选情况下没有单选框，没有开关 */}
                  {
                    getFieldDecorator("componentStyle",{initialValue:0,rules:[{required:true,message:"请选择"}]})(
                      <Radio.Group>
                        {
                          getFieldValue("optionsType") == 0 ?(
                            <Radio value={0}>单选按钮</Radio>
                          ) : ''
                        }
                        {
                          getFieldValue("optionsType") == 1 ?(
                            <Radio value={1}>复选框</Radio>
                          ) : ''
                        }
                        
                        <Radio value={2}>下拉框</Radio>
                        {
                          getFieldValue("optionsType") == 0 ?(
                            <Radio value={3}>开关</Radio>
                          ) : ''
                        }
                      </Radio.Group>
                    )
                  }
                </Form.Item>
                {
                  getFieldValue('componentStyle') != 3 ? (
                    <div>
                      <Form.Item label="选项范围">
                        {
                          getFieldDecorator("optionRange")(
                            <Select onChange={this.changeOptionRange}>
                              <Select.Option value={0}>数据字典</Select.Option>
                              <Select.Option value={1}>自定义</Select.Option>
                            </Select>
                          )
                        }
                      </Form.Item>
                      {
                        //数据字典
                        getFieldValue("optionRange") == 0 ? (
                          <Form.Item label="选项内容">
                            <Form.Item style={inlineFormItem}>
                              {
                                getFieldDecorator('dictionaryId')(
                                  <Select style={{width:200}} onChange={(value) => this.changeDictionaryId(value,'form')}>
                                    {
                                      dictionaryList.map(item => {
                                        return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                      })
                                    }
                                  </Select>
                                )
                              }
                            </Form.Item>
                            <Form.Item style={{...inlineFormItem,marginLeft:10}}>
                              {
                                getFieldDecorator("optionContent")(
                                  <Select style={{width:200}} onChange={this.changeOptionContentByDictionary}>
                                    {
                                      colList.map(item => {
                                        return <Select.Option value={item} key={item}>{item}</Select.Option>
                                      })
                                    }
                                  </Select>
                                )
                              }
                            </Form.Item>
                          </Form.Item>
                        ) : ''
                      }
                      {
                        //自定义
                        getFieldValue("optionRange") == 1 ? (
                          <Form.Item label="选项内容">
                            <div id='optionContent' key={domKey}>
                              {
                                optionContentList.map((item,index) => {
                                  return (
                                    <div key={index} className={styles.optionBox} style={{marginBottom:10}}>
                                      <Icon type='unordered-list' className={styles.dragIcon} />
                                      <Input value={item} onChange={(e) => this.changeOptionContent(e,index)} />
                                      <Icon type='delete' className={styles.removeIcon} onClick={() => this.removeOptionContent(index)} />
                                    </div>
                                  )
                                })
                              }
                            </div>
                            <Button type='link' icon='plus' style={{marginTop:10}} onClick={this.addOptionContent}>新增选项内容</Button>
                          </Form.Item>
                        ) : ''
                      }
                      <Form.Item label="默认值">
                      {
                        getFieldValue("optionRange") == 0 ? (
                          getFieldDecorator("defaultValue")(
                            <Select mode={getFieldValue("optionsType") == 1 ? 'multiple' : ''}>
                              {
                                defaultOptionList.map((item) => {
                                  return <Select.Option value={item} key={item}>{item}</Select.Option>
                                })
                              }
                            </Select>
                          )
                        ) : (
                          getFieldDecorator("defaultValue")(
                            <Select mode={getFieldValue("optionsType") == 1 ? 'multiple' : ''}>
                              {
                                optionContentList.map((item,index) => {
                                  return item.length > 0 ? (
                                    <Select.Option value={item} key={index}>{item}</Select.Option>
                                  ) : ''
                                })
                              }
                            </Select>
                          )
                        )
                        
                      }
                    </Form.Item>
                    <Form.Item label="禁用">
                      {
                        getFieldDecorator("disabled",{valuePropName: 'checked'})(
                          <Checkbox></Checkbox>
                        )
                      }
                    </Form.Item>
                    </div>
                  ) : ''
                }
              </div>
            ) : ''
          }

          {/**时间 */}
          {
            getFieldValue("componentType") == 4 ? (
              <div>
                <Form.Item label="时间/日期">
                  {
                    getFieldDecorator("dateType")(
                      <Select>
                        <Select.Option value={0}>年</Select.Option>
                        <Select.Option value={1}>年-月</Select.Option>
                        <Select.Option value={2}>年-月-日</Select.Option>
                        <Select.Option value={3}>年-月-日 时</Select.Option>
                        <Select.Option value={4}>年-月-日 时:分</Select.Option>
                        <Select.Option value={5}>年-月-日 时:分:秒</Select.Option>
                        <Select.Option value={6}>时:分</Select.Option>
                        <Select.Option value={7}>时:分:秒</Select.Option>
                      </Select>
                    )
                  }
                </Form.Item>
                <Form.Item label="显示格式">
                  {
                    getFieldDecorator("displayFormat")(
                      <Select>
                        <Select.Option value={0}>ISO (2022-07-21)</Select.Option>
                        <Select.Option value={1}>中国 (2022年7月21日)</Select.Option>
                        <Select.Option value={2}>US (7/21/2022)</Select.Option>
                        <Select.Option value={3}>EU (21/7/2022)</Select.Option>
                      </Select>
                    )
                  }
                </Form.Item>
                <Form.Item label="选择范围">
                  <Form.Item style={{marginBottom:10}}>
                    {
                      getFieldDecorator("optionDateRange",{initialValue:0})(
                        <Radio.Group>
                          <Radio value={0}>绝对时间</Radio>
                          <Radio value={1}>相对时间</Radio>
                        </Radio.Group>
                      )
                    }
                  </Form.Item>
                  {
                    //绝对时间
                    getFieldValue("optionDateRange") == 0 ? (
                      <div>
                        <Form.Item>
                          <Form.Item style={inlineFormItem}>
                            {
                              getFieldDecorator("startStatus",{valuePropName:"checked"})(
                                <Checkbox>起始时间</Checkbox>
                              )
                            }
                          </Form.Item>
                          <Form.Item style={inlineFormItem}>
                            {
                              getFieldDecorator("startTime",{rules:[{required:getFieldValue("startStatus"),message:"请选择时间"}]})(
                                this.renderDateBox('startTime')
                              )
                            }
                          </Form.Item>
                        </Form.Item>
                        <Form.Item style={{marginBottom:0}}>
                          <Form.Item style={inlineFormItem}>
                            {
                              getFieldDecorator("endStatus",{valuePropName:"checked"})(
                                <Checkbox>结束时间</Checkbox>
                              )
                            }
                          </Form.Item>
                          <Form.Item style={inlineFormItem}>
                            {
                              getFieldDecorator("endTime",{rules:[{required:getFieldValue("endStatus"),message:"请选择时间"}]})(
                                this.renderDateBox('endTime')
                              )
                            }
                          </Form.Item>
                        </Form.Item>
                      </div>
                    ) : ''
                  }
                  {
                    //相对时间
                    getFieldValue("optionDateRange") == 1 ? (
                      <div>
                        <Form.Item>
                          <Form.Item style={inlineFormItem}>
                            <label>前</label>
                            {
                              getFieldDecorator("frontNumber")(
                                <InputNumber min={0} precision={0} style={{margin:'0 10px'}} />
                              )
                            }
                          </Form.Item>
                          <Form.Item style={inlineFormItem}>
                            {
                              getFieldDecorator("frontType")(
                                this.renderDateUnit('frontType')
                              )
                            }
                          </Form.Item>
                        </Form.Item>
                        <Form.Item style={{marginBottom:0}}>
                          <Form.Item style={inlineFormItem}>
                            <label>后</label>
                            {
                              getFieldDecorator("backNumber")(
                                <InputNumber min={0} precision={0} style={{margin:'0 10px'}} />
                              )
                            }
                          </Form.Item>
                          <Form.Item style={inlineFormItem}>
                            {
                              getFieldDecorator("backType")(
                                this.renderDateUnit('backType')
                              )
                            }
                          </Form.Item>
                        </Form.Item>
                      </div>
                    ) : ''
                  }
                </Form.Item>
                {
                  getFieldValue("optionDateRange") == 0 ? (
                    <Form.Item label="默认值">
                      {
                        getFieldDecorator("defaultValue")(
                          this.renderDateBox("defaultValue")
                        )
                      }
                    </Form.Item>
                  ) : ''
                }
                
              </div>
            ) : ''
          }

          {/**多级联动 */}
          {
            getFieldValue("componentType") == 5 ? (
              <div>
                <Form.Item label="数据字典">
                  <Form.Item>
                    {
                      getFieldDecorator("dictionaryId",{rules:[{required:true,message:'请选择'}]})(
                        <Select onChange={(value) => this.changeDictionaryId(value,'form')}>
                          {
                            dictionaryList.map(item => {
                              return <Select.Option value={item.id}>{item.name}</Select.Option>
                            })
                          }
                        </Select>
                      )
                    }
                  </Form.Item>
                  <Form.Item style={{marginBottom:0}}>
                    <Row>
                    {
                      columnValue.map((item,index) => {
                        return (
                          <Col span={6} className={styles.optionBox}>
                            <Select value={item} onChange={(value) => this.changeColumnValue(value,index)}>
                              {
                                colList.map(col => {
                                  return <Select.Option value={col} key={col}>{col}</Select.Option>
                                })
                              }
                              
                            </Select>
                            <Icon type='delete' className={styles.removeIcon} onClick={() => this.removeColumnValue(index)} />
                          </Col>
                        )
                      })
                    }
                    </Row>
                    <Button type='link' icon='plus' onClick={this.addColumnValue}>增加列名</Button>
                  </Form.Item>
                </Form.Item>
              </div>
            ) : ''
          }
          {/**文件/图片 */}
          {
            getFieldValue("componentType") == 6 || getFieldValue("componentType") == 7 ? (
              <div>
                <Form.Item label="最大个数">
                  {
                    getFieldDecorator("maxNumber",{initialValue:1,rules:[{required:true,message:"必填项"}]})(
                      <InputNumber min={0} precision={0} />
                    )
                  }
                </Form.Item>
                <Form.Item label={getFieldValue("componentType") == 6 ? '单个文件大小' : '单个图片大小'}>
                  {
                    getFieldDecorator("singleSize",{initialValue:1,rules:[{required:true,message:"必填项"}]})(
                      <InputNumber min={0} precision={0} />
                    )
                  }
                  <label>MB</label>
                </Form.Item>
              </div>
            ) : ''
          }

          <Form.Item label="输入框提示">
            {
              getFieldDecorator('inputPrompt')(
                <Input />
              )
            }
          </Form.Item>
          <Form.Item label="提示类型" style={{marginBottom:0}}>
            {
              getFieldDecorator('promptType',{initialValue:2})(
                <Radio.Group>
                  <Radio value={0}>
                    显示在控件下方
                    <div className={styles.tipBox}>
                      <Input readOnly/>
                      <div style={{color:"red"}}>提示信息</div>
                    </div>
                  </Radio>
                  <Radio value={1}>
                    提示标签形式
                    <div className={styles.tipBox} style={{display:'flex',justifyContent:"center",alignItems:"center"}}>
                      <Icon type='question-circle' />
                      <div className={styles.tips}>提示标签，鼠标悬浮生效，适应文本大小</div>
                    </div>
                  </Radio>
                  {
                    getFieldValue("componentType") == 6 || getFieldValue("componentType") == 7 ? '' : (
                      <Radio value={2}>
                        显示在控件内部
                        <div className={styles.tipBox}>
                          <Input readOnly placeholder='提示信息' />
                        </div>
                      </Radio>
                    )
                  }
                  
                </Radio.Group>
              )
            }
          </Form.Item>
          <Form.Item label="字段必填">
            {
              getFieldDecorator("requiredType",{valuePropName: 'checked'})(
                <Checkbox></Checkbox>
              )
            }
          </Form.Item>
          {
            //组件类型为文本/文本域/数字框时 有正则校验 其他无
            getFieldValue("componentType") == 0 || getFieldValue("componentType") == 1 || getFieldValue("componentType") == 2 ? (
              <Form.Item label="校验规则">
                {
                  getFieldDecorator('verifyRule')(
                    <Input style={{width:'80%',marginRight:10}} />
                  )
                }
                <Tooltip title="用于字段接收的数据规范的校验，一般在此处输入正则表达式" >
                  <Icon type='question-circle' />
                </Tooltip>
              </Form.Item>
            ) : ''
          }
          
          <Form.Item label="有误提示">
            {
              getFieldDecorator('errorMessage')(
                <Input />
              )
            }
          </Form.Item>
          <Form.Item label="绑定实体">
            {
              getFieldDecorator('bindModelId')(
                <Select style={{width:'80%',marginRight:10}} allowClear={true}>
                  <Select.OptGroup label="自定义实体">
                    {
                      modelList.map(item => {
                        return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                      })
                    }
                  </Select.OptGroup>
                  <Select.OptGroup label="系统实体">
                    {
                      sysModelList.map(item => {
                        return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                      })
                    }
                  </Select.OptGroup>
                </Select>
              )
            }
            <Tooltip title="支持语音识别功能" >
              <Icon type='question-circle' />
            </Tooltip>
          </Form.Item>
        </Form>

        <div
          style={{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={this.doClose} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={this.checkData} type="primary">
            保存
          </Button>
          
        </div>
      </Drawer>
    )
  }
}

export default Form.create()(EditField)